<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('设备列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <input type="hidden" id="partnerId" name="partnerId" th:value="${partnerId}">
                        <input  th:if="${deviceStatus != 3}" type="hidden" id="deviceStatus" name="deviceStatus" th:value="${deviceStatus}">
                        <li>
                            <label>设备类型：</label>
                            <select name="devType" th:with="type=${@dict.getType('sys_device_type')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label>设备状态：</label>
                            <select name="devStatus" th:with="type=${@dict.getType('sys_device_status')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li th:if="${deviceStatus == 3}">
                            <label>是否部署：</label>
                            <select name="deviceStatus" th:with="type=${@dict.getType('sys_device_type')}">
                                <option value="">所有</option>
                                <option value="1">否</option>
                                <option value="2">是</option>
                            </select>
                        </li>
                        <li class="select-time">
                            <label style="width: 105px;">设备部署时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="endTime"/>
                        </li>
                        <li>
                            <label style="width: 105px;">关键字查询字段：</label>
                            <select name="fields">
                                <option value="sn" selected>机柜SN</option>
                                <option value="partnerFullName">合作商姓名</option>
                                <option value="merchantFullName">商户姓名</option>
                                <option value="storeName">门店名</option>
                            </select>
                            <input type="text" name="keywords"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-primary" onclick="selectFirstColumns()" shiro:hasPermission="system:device:allot">
                <i class="fa fa-edit"></i> 批量选择活动
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:device:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:device:remove')}]];


    var stockFlag = [[${@permission.hasPermi('system:device:stock')}]];

    var devTypeDatas = [[${@dict.getType('sys_device_type')}]];
    var devStatusDatas = [[${@dict.getType('sys_device_status')}]];

    var deviceStatusDatas = [[${@dict.getType('sys_device_the_life_cycle')}]];

    var isActivityDatas = [[${@dict.getType('sys_device_is_activity')}]];

    var devIncomeFlag = [[${@permission.hasPermi('system:device:devIncome')}]]; // 设备营业额列表展示


    var prefix = ctx + "system/device";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "设备",
            queryParams: queryParams,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'sn',
                    title: '机柜SN(设备状态)',
                    formatter: function (value, row, index) {
                        return value + "<span style='color: green;'>(" + $.table.selectDictLabel(devStatusDatas, row.devStatus) + ")</span>";
                    }
                },
                {
                    field: 'devType',
                    title: '设备类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(devTypeDatas, value);
                    }
                },
                {
                    field: 'isActivity',
                    title: '是否活动设备(活动名称)',
                    formatter: function (value, row, index) {
                        var eventName = "-";
                        if (row.isActivity == 1) {
                            // 是活动机子，那么展示活动名称
                            eventName = "<span style='color: #00B83F;'>" + row.eventName + "</span>";
                        }
                        return $.table.selectDictLabel(isActivityDatas, value) + "&nbsp;(" + eventName + ")";
                    }
                },
                {
                    field: 'deviceStatus',
                    title: '是否部署',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(deviceStatusDatas, value);
                    }
                },
                {
                    field: 'partnerFullName',
                    title: '直营合作商'
                },
                {
                    field: 'merchantFullName',
                    title: '直营商户'
                },
                {
                    field: 'storeName',
                    title: '门店名'
                },
                {
                    field: 'deployTime',
                    title: '部署时间'
                },
                {
                    field: 'diffHours',
                    title: '闲置时间(小时)',
                    formatter: function (value, row, index) {
                        // 设备状态 0 待划分 1 待部署 2 已部署
                        var diffHours = value;
                        if (row.deviceStatus == 2) {
                            diffHours = "-";
                        }
                        return diffHours;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];


                        if (row.devType.indexOf("DEV") != -1) {
                            actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="checkOnline(\'' + row.id + '\')" ">检测是否在线</a> ');

                            actions.push('<a class="btn btn-success btn-xs ' + stockFlag + '" href="javascript:void(0)" onclick="queryStock(\'' + row.id + '\')"><i class="fa fa-battery"></i>查看库存</a> ');
                        }

                        // actions.push('<a class="btn btn-success btn-xs ' + stockFlag + '" target="_blank" href="https://cli.im/api/qrcode/code?text=https://www.zjsuichong.com/min/dev/' + row.sn + '">生成二维码</a> ');

                        // 返回仓库
                        // actions.push('<a class="btn btn-danger btn-xs ' + stockFlag + '" href="javascript:void(0)" onclick="returnWarehouse(\'' + row.id + '\')"><i class="fa fa-battery"></i>返回仓库</a> ');

                        // actions.push('<a class="btn btn-primary btn-xs ' + devIncomeFlag + '" href="javascript:void(0)" onclick="devIncomes(\'' + row.id + '\')"><i class="fa fa-gear"></i>设备营业额</a> ');

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.partnerId = $("#partnerId").val();
        // var deviceStatus = $("#deviceStatus").val();
        // if (deviceStatus != 3) {
        //     search.deviceStatus = deviceStatus;
        // }
        // alert(JSON.stringify(search));
        return search;
    }


    function devIncomes(id) {
        var url = prefix + "/devIncomes/" + id;
        var width = null;
        var height = null;
        if ($.common.isMobile()) {
            width = 'auto';
            height = 'auto';
        }
        if ($.common.isEmpty(url)) {
            url = "/404.html";
        }
        if ($.common.isEmpty(width)) {
            width = 1200;
        }
        if ($.common.isEmpty(height)) {
            height = 660;
        }
        layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "设备营业额",
            content: url,
            btn: ['关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            cancel: function (index) {
                return true;
            }
        });
    }


    // 查看库存
    function queryStock(id) {
        var url = prefix + "/queryStock/" + id;
        var width = null;
        var height = null;
        if ($.common.isMobile()) {
            width = 'auto';
            height = 'auto';
        }
        if ($.common.isEmpty(url)) {
            url = "/404.html";
        }
        if ($.common.isEmpty(width)) {
            width = 800;
        }
        if ($.common.isEmpty(height)) {
            height = ($(window).height() - 50);
        }
        layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: "查看库存",
            content: url,
            btn: ['关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            cancel: function (index) {
                return true;
            }
        });
    }

    // 校验设备是否在线
    function checkOnline(id) {
        var url = prefix + "/checkOnline";
        var data = {"id": id};
        $.operate.submit(url, "post", "json", data);
    }


    // 进行返回仓库操作
    function returnWarehouse(id) {
        // 确认框
        $.modal.confirm("确认执行[返回仓库]操作？", function () {
            var url = prefix + "/returnWarehouse";
            var data = {"id": id};
            $.operate.submit(url, "post", "json", data);
        });
    }

    // 批量选择活动
    function selectFirstColumns() {
        var column = $.table.selectFirstColumns();
        if (column == null || column == "") {
            layer.msg("您未选择设备");
            return;
        }
        var url = prefix + "/devChoseEvents/" + column;
        $.modal.open("批量选择活动", url, 800, 600);
    }

</script>
</body>
</html>